import { Button, Table } from 'antd';
import axios from 'axios';
import React, { useEffect, useState } from 'react'

const Index: React.FC = () => {
  const [list, setList] = useState([]);

  const fetchList = () => {
    axios.get('/api/user/list').then(resp => {
      console.log(resp.data)
      setList(resp.data.data)
    })
  }
  const columns = [
    {
      key: 1,
      dataIndex: 'id',
      title: 'id'
    },
    {
      key: 2,
      dataIndex: 'nickname',
      title: 'nickname'
    },
    {
      key: 3,
      dataIndex: 'username',
      title: 'username'
    },
    {
      key: 4,
      dataIndex: 'password',
      title: 'password'
    },
    {
      key: 5,
      dataIndex: 'role',
      title: 'role'
    },
    {
      key: 6,
      dataIndex: 'id',
      title: '操作',
      render(id: string) {
        return (
          <div>
            <Button type="primary" danger onClick={() => {
              axios.delete('/api/user/list/' + id).then(() => fetchList())
            }}>删除</Button>
          </div>
        )
      }
    }
  ]

  useEffect(() => {
    fetchList()
  }, [])

  if (list.length === 0) {
    return <div>数据加载中...</div>
  }
  return (
    <div >
      <Table rowKey={'id'} dataSource={list} columns={columns}></Table>
    </div>
  )
}

export default Index